<template>
  <div class="m-25 mt-65">
    <div class="normal-box-mod">

        <!-- title -->
        <div class="normal-box-hd clearfix">
            <div class="normal-box-title">
            <div class="decorate-square"></div>
            <h2>回收数据</h2>
            </div>
        </div>

        <!-- 搜索 -->
        <div class="normal-box-bd">
            <div class="clearfix mb-20">
                <Row>
                    <Col span="5">
                        <sele @ProvinceData="childByValue"></sele>
                    </Col>
                    <Col span="12">
                        <DatePicker v-model="queryData.startTime" :clearable=false :editable=false format="yyyy/MM/dd" type="date" placement="bottom-end" placeholder="开始时间" style="width: 200px"></DatePicker>
                        &nbsp;-&nbsp;
                        <DatePicker v-model="queryData.endTime" :clearable=false :editable=false format="yyyy/MM/dd" type="date" placement="bottom-end" placeholder="结束时间" style="width: 200px"></DatePicker>
                    </Col>
                </Row>

                <br>
                <Input class="mr-10" v-model="queryData.garbageid" :clearable=true placeholder="二维码" style="width: 200px"/>
                <Input class="mr-10" v-model="queryData.name" :clearable=true placeholder="用户名" style="width: 200px"/>
                <Input class="mr-10" v-model="queryData.xjname" :clearable=true placeholder="巡检员姓名" style="width: 200px"/>
                <Button type="primary" custom-icon="iconfont icon-chaxun"  size="small" @click="getList">查找</Button>
            </div>
        </div>


        <div>
            <i-table stripe highlight-row border :content="self" :columns="Tcolumns" :data="recoverList"></i-table>
        </div>
        <div class="page">
          <Page :total="queryData.totalRecord" :page-size="queryData.limit" :current="queryData.page" show-total show-elevator @on-change="changepage"></Page>
        </div>
        <Modal footer-hide v-model="modalImg">
            <img :src="newImg" alt="图片加载失败" style="width:100%;">
        </Modal>

    </div>
  </div>
</template>

<script>
import recoverApi from "@/api/pingHu/gcInspection.js";
import moment from "moment";
import { Message } from "iview";
import sele from "@/view/test/city.vue"
import global from '@/assets/js/global'
export default {
  components: {
    sele
  },
  data() {
    return {
      recoverList: [],
      keyWords: '',  // 搜索关键字
      index: '',  // 当前编号
      modalImg: false, // 图片框
      newImg: '', // 图片路径


      // 获取数据配置
      queryData: {
        limit: 10,
        page: 1,
        totalRecord: 0,
        userId: '',
        machineId: '',
        startTime: global.time(new Date()),
        endTime: global.time(new Date()),
        name: '', // 用户名
        xjname: '', // 巡检员姓名
        garbageid: '', // 二维码
        typeid: 11
        // 省市区
      },

      // 表格配置
      self: this,
      Tcolumns: [
        { align:"center", title: "ID", key: "id", minWidth: 80},
        // { align:"center", title: "业务单号", key: "channelid", minWidth: 120},
        { align:"center", title: "二维码", key: "garbageid", minWidth: 120},
        { align:"center", title: "姓名", key: "name", minWidth: 80},
        { align:"center", title: "小区", key: "comminname", minWidth: 100},
        { align:"center", title: "地址", key: "address", minWidth: 90},
        { align:"center", title: "分数", key: "score", minWidth: 50},
        { align:"center", title: "评分时间", key: "opertime", minWidth: 125},
        { align:"center", title: "重量", key: "weight", minWidth: 80},
        {
          align:"center",
          title: "巡检图片",
          key: "currentPhoto",
          minWidth: 100,
          render:(h,params)=> {
            return h('img',{
              attrs: {src: params.row.currentPhoto},
              style: {width: `100%`,maxHeight: '8vh',cursor: 'pointer'},
              on: {
                click:()=> {this.seeImg(params.row.currentPhoto)}
              }
            })
          }
        },
        { align:"center", title: "巡检人员", key: "xjname", minWidth: 80},
        { align:"center", title: "巡检人电话", key: "xjphone", minWidth: 100},
        { // 操作
          title: '操作',
          key: 'action',
          minWidth: 90,
          align: 'center',
          render: (create, params)=> {
              // 创建父节点
              return create('div',[
                  // 查看详情
                  create('a',{
                      props: { type: 'error', size: 'small',},
                      style: {margin: '0 3px', color: '#f00'},
                      on: {
                          click:()=> {
                              this.remove(params.row)
                          }
                      }
                  },'删除'),

              ])
          }
        }

      ],

    };
  },
  async created() {
    await setTimeout({},1000)
    let area = window.defArea
    this.queryData.provid = area[0]
    this.queryData.cityid = area[1]
    this.queryData.distid = area[2]
    this.getList();
  },
  methods: {
    // 获取数据列表
    async getList() {
      this.queryData.startTime = global.time(this.queryData.startTime)
      this.queryData.endTime = global.time(this.queryData.endTime)
      console.log(123,this.queryData);
      let data = (await recoverApi('get',this.queryData,'page')).data
      console.log('列表：',data);
      data.list.map(item=> {
          item.uselessflag==1?item.uselessflag='回收':item.uselessflag='分类'
          item.weight==null||''?item.weight=0:item.weight=item.weight+'KG'
          switch (Number(item.typeid)) {
                case 1026: item.typeid = '铁类'; break;
                case 1017: item.typeid = '旧衣物'; break;
                case 12: item.typeid = '可回收垃圾'; break;
                case 4: item.typeid = '纸类'; break;
                case 2: item.typeid = '塑料类'; break;
                case 13: item.typeid = '其他垃圾'; break;
                case 11: item.typeid = '厨余垃圾'; break;
                case 1121: item.typeid = '玻璃'; break;
                case 17: item.typeid = '小家电'; break;
            }
      })
      this.queryData.totalRecord = data.totalRecord;
      this.recoverList = data.list
    },


    // 分页切换
    changepage(index) {
      this.queryData.page = index;
      this.getList();
    },

    // 改变load状态
    changeLoading() {
      this.newRecover.loading = false;
      this.sf_ctrl.loading = false;
      this.$nextTick(() => {
        this.newRecover.loading = true;
        this.sf_ctrl.loading = true;
      });
    },
    seeImg(qwq) {
      console.log(qwq);
      this.modalImg = true
      this.newImg = qwq
    },
    // 删除
    remove(index) {
     const _id = String(index.id);
      this.$Modal.confirm({
        title: "删除确认",
        content:
          "<p>你确认要删除ID为 <strong>" + _id +
          "</strong> 的回收记录吗？</p>",
        loading: true,
        onOk: async () => {
            let data = (await recoverApi('delete',undefined,_id))
            let result = data.data
            let message = data.message
            if(result) {
              this.$Message.success("操作成功")
              this.getList()
              this.$Modal.remove();
              return
            }
            this.$Message.error(message)
            this.$Modal.remove();
        }
      });

    },

    // 六级联动数据获取
    childByValue(newObject) {
        let area = this.queryData
        area.provid = newObject.provid||'';
        area.cityid = newObject.cityid||'';
        area.distid = newObject.distid||'';
        area.strtid = newObject.strtid||'';
        area.commid = newObject.commid||'';
        area.comminid = newObject.comminid||'';
    },




  },

};
</script>

<style>
    td[class="y ivu-table-column-center"] {background: #02D792 !important; color: #fff;}
    td[class="n ivu-table-column-center"] {background: #f00 !important; color: #fff;}
    .page {padding: 1em .5em;}
</style>
